<template>
  <div class="pay">
    <div class="pay__pay-type--warp">
      <div
        v-if="payConfig.wxConfigStatus"
        :class="['pay__pay-type--item', { 'active-item': payActive === PayMode.WX_NATIVE }]"
        @click="changePayType(PayMode.WX_NATIVE)"
      >
        <img class="pay-icon" :src="PayWX" alt="" />
        <span>微信支付</span>
        <img class="select-icon" :src="isSelectIcon(PayMode.WX_NATIVE)" alt="" />
      </div>
      <div
        v-if="payConfig.alipayConfigStatus"
        :class="['pay__pay-type--item ', { 'active-item': payActive === PayMode.ALI_PC }]"
        @click="changePayType(PayMode.ALI_PC)"
      >
        <img class="pay-icon" :src="PayZFB" alt="" />
        <span>支付宝支付</span>
        <img class="select-icon" :src="isSelectIcon(PayMode.ALI_PC)" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PayMode } from '../../../shared/enums/index'

// icon
import PayUnselected from '@/assets/images/cashier/pay-unselected.png'
import PaySelected from '@/assets/images/cashier/pay-selected.png'
import PayWX from '@/assets/images/cashier/pay-wx.png'
import PayZFB from '@/assets/images/cashier/pay-zfb.png'

const route = useRoute()

const props = withDefaults(defineProps<{ settleMode: number }>(), {
  settleMode: PayMode.WX_NATIVE
})

const emits = defineEmits<{
  (e: 'change', event: number): void
}>()

// 支付类型
const payActive = ref<number>(props.settleMode || PayMode.WX_NATIVE)

/**
 * @description 支付类型切换
 */
const changePayType = (type: PayMode) => {
  payActive.value = type
  emits('change', type)
}
const { appId } = route.query

// 根据产品线id获取租户配置支付信息
interface PayConfig {
  alipayConfigStatus: number
  wxConfigStatus: number
}
const payConfig = ref<PayConfig>({
  alipayConfigStatus: 1,
  wxConfigStatus: 1
})
const getPayConfigData = async () => {
  // const { data } = await useHttp<PayConfig>(ApisCommon.getPaymentConfig, {
  //   body: {
  //     usedId: appId,
  //     settleMode: PayMode.WX_NATIVE
  //   }
  // })
  // const config = data.value.data as PayConfig
  // if (!config.wxConfigStatus) {
  //   payActive.value = PayMode.ALI_PC
  // }
  payConfig.value = {
    alipayConfigStatus: 1,
    wxConfigStatus: 1
  }
}

getPayConfigData()

// watch(
//   () => payActive.value,
//   (val) => {
//     emits('change', val)
//   },
//   {
//     immediate: true
//   }
// )

/**
 * @description 选中icon展示
 */
const isSelectIcon = (mode: PayMode) => {
  return payActive.value === mode ? PaySelected : PayUnselected
}
</script>

<style scoped lang="scss">
.pay {
  &__pay-type {
    &--warp {
      @apply flex justify-between items-center;
    }

    &--item {
      @apply flex items-center px-[12px] py-[6px] bg-[#FAFAFA] rounded-[12px] cursor-pointer;
      box-shadow: 0 0 0 1px #eee;
      .pay-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }
      .select-icon {
        margin-left: 22px;
      }

      &.active-item {
        @apply px-[12px] py-[6px] font-medium;
      }
    }

    &--item + &--item {
      margin-left: 24px;
    }
  }
}
</style>
